import React, {Component} from 'react';
import {View, Text, StatusBar, ImageBackground, Image, TouchableOpacity, ScrollView} from 'react-native'
import SafeAreaViewPlus from "../../common/SafeAreaViewPlus";
import LinearGradient from 'react-native-linear-gradient'
import styles from "./styles";
import Ionicons from "react-native-vector-icons/Ionicons";
import AntDesign from "react-native-vector-icons/AntDesign";
import NavigationUtil from "../../navigators/NavigationUtil";
import StorageUtil from '../../utils/StorageUtil';
import {Constant} from '../../common/Constant';
import {Modal} from '@ant-design/react-native';
import Dict from '../../common/Dict';

class Mine extends Component {

    constructor(props) {
        super(props);
        this.state = {
            info: {},
        }
    }

    componentDidMount() {
        this.initUserInfo()
    }

    async initUserInfo(){
        const user = await StorageUtil.get(Constant.userInfo);
        this.setState({
            info: user || {}
        })
    }

    gotoPage(page){
        NavigationUtil.goPage(page);
    }
    _exitApp(){
        const {navigation} = this.props;
        Modal.alert('提示', '确定退出当前账号', [
            {
                text: '取消',
                style: 'cancel',
            },
            {
                text: '确认',
                onPress: () => {
                    // 提交活动
                    StorageUtil.delete(Constant.token);
                    // navigation.navigate('Init',{
                    //   isExit: true,
                    // });
                    NavigationUtil.goPage('Login');
                },
            },
        ]);
    }
    _renderUserInfo(){
        const {info} = this.state
        return (
            <View style={[styles.userInfoPanel,styles.blockPanel,{backgroundColor: '#fff',borderRadius: 10}]}>
                <View style={styles.msgPanel}>
                    <View style={{borderRadius: 5,
                        padding: 5,
                        display: 'flex',
                        flexDirection: 'row',
                        alignItems: 'center'}}>
                        <View style={{flex: 1,display: 'flex',flexDirection: 'row'}}>
                            <View>
                                <Image source={require('../../assets/home/userDefault.png')} style={styles.userImage} />
                            </View>
                            <View style={{paddingLeft: 10}}>
                                <View style={{display: 'flex',flexDirection: 'row',alignItems: 'center',marginBottom: 5}}>
                                    <Text style={{color: '#4D4D4D',fontSize: 16}}>{info.nickName}</Text>
                                    <Text style={{color: '#7E7E7E',fontSize: 12,paddingLeft: 5}}>{info.dept && info.dept.name}</Text>
                                </View>
                                {info.aqcNum?
                                    <ImageBackground style={styles.noBgImage} source={require('../../assets/home/no_bg.png')} >
                                    <Text style={{color: '#fff',fontSize: 12,}}>执 {info.aqcNum}</Text>
                                    </ImageBackground>:null
                                }

                            </View>
                        </View>
                        <TouchableOpacity
                            style={{width: 80,alignItems: 'center',display:'flex',justifyContent: 'center',flexDirection: 'row'}}
                            onPress={()=>this.gotoPage('Person')}
                        >
                                <Text style={{color: '#F1A72C',paddingRight: 3}}>个人主页</Text>
                                <AntDesign name={'right'} size={14} color={'#F1A72C'}/>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{display: 'flex',flexDirection: 'row',justifyContent: 'space-between',alignItems: 'center',height: 50,paddingLeft: 5,paddingRight: 5}}>
                    <View style={{display: 'flex',flexDirection: 'row',alignItem: 'center',justifyContent: 'center'}}>
                        <Image source={require('../../assets/mine/sign_icon.png')} style={{width: 25,height: 25,marginRight: 5}} />
                        <Text style={{color: '#333'}}>已连续签到</Text>
                        <Text style={{color: '#FCB238',paddingLeft: 2,paddingRight: 2}}>3</Text>
                        <Text style={{color: '#333'}}>天</Text>
                    </View>
                    <View>
                        <TouchableOpacity>
                            <LinearGradient
                                colors={['#4B82FB','#52D3FE']} start={{ x: 1, y: 0 }} end={{ x: 0, y: 0 }}
                                style={{justifyContent: 'center',alignItems: 'center',width: 100,height: 30,borderRadius: 20,}}
                            >
                                <Text style={{color: '#fff'}}>签到</Text>
                            </LinearGradient>
                        </TouchableOpacity>
                    </View>
                </View>
            </View>
        )
    }

    _renderBtns(){
        return (
            <View style={[styles.blockPanel,styles.btnsPanel]}>
                <TouchableOpacity style={styles.btnItem}>
                    <View style={styles.btnText}>
                        <Image source={require('../../assets/mine/btn_icon1.png')} style={{width: 40,height: 40}} />
                        <Text>我的消息</Text>
                        <View style={styles.btnNum}>
                            <Text style={{color: '#fff', fontSize: 10}}>2</Text>
                        </View>
                    </View>

                </TouchableOpacity>
                <TouchableOpacity style={styles.btnItem}>
                    <View style={styles.btnText}>
                        <Image source={require('../../assets/mine/btn_icon2.png')} style={{width: 40,height: 40}} />
                        <Text>待处理</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={styles.btnItem}>
                    <View style={styles.btnText}>
                        <Image source={require('../../assets/mine/btn_icon3.png')} style={{width: 40,height: 40}} />
                        <Text>进行中</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={styles.btnItem}>
                    <View style={styles.btnText}>
                        <Image source={require('../../assets/mine/btn_icon4.png')} style={{width: 40,height: 40}} />
                        <Text>已完成</Text>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
    _renderMenu1(){
        return (
            <View style={[styles.blockPanel, styles.menuPanel]}>
                <TouchableOpacity
                    style={styles.optionListItem}
                    onPress={()=>this.gotoPage('DeptList')}
                >
                    <View style={styles.optionListItemLeft}>
                        <Image source={require('../../assets/mine/menu_icon1.png')} style={styles.optionListItemLeftIcon}/>
                        <Text style={styles.optionListItemLeftLabel}>部门列表</Text>
                    </View>
                    <AntDesign name={'right'} size={18} style={styles.arrowIcon} />
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.optionListItem}
                    onPress={()=>this.gotoPage('MyList')}
                >
                    <View style={styles.optionListItemLeft}>
                        <Image source={require('../../assets/mine/menu_icon2.png')} style={styles.optionListItemLeftIcon}/>
                        <Text style={styles.optionListItemLeftLabel}>我的列表</Text>
                    </View>
                    <AntDesign name={'right'} size={18} style={styles.arrowIcon} />
                </TouchableOpacity>
                <TouchableOpacity style={styles.optionListItem}>
                    <View style={styles.optionListItemLeft}>
                        <Image source={require('../../assets/mine/menu_icon3.png')} style={styles.optionListItemLeftIcon}/>
                        <Text style={styles.optionListItemLeftLabel}>我的催办</Text>
                    </View>
                    <AntDesign name={'right'} size={18} style={styles.arrowIcon} />
                </TouchableOpacity>

                <TouchableOpacity style={styles.optionListItem}>
                    <View style={styles.optionListItemLeft}>
                        <Image source={require('../../assets/mine/menu_icon4.png')} style={styles.optionListItemLeftIcon}/>
                        <Text style={styles.optionListItemLeftLabel}>我的督办</Text>
                    </View>
                    <AntDesign name={'right'} size={18} style={styles.arrowIcon} />
                </TouchableOpacity>
            </View>
        )
    }

    _renderMenu2(){
        return (
            <View style={[styles.blockPanel, styles.menuPanel]}>
                <TouchableOpacity style={styles.optionListItem}>
                    <View style={styles.optionListItemLeft}>
                        <Image source={require('../../assets/mine/menu_icon5.png')} style={styles.optionListItemLeftIcon}/>
                        <Text style={styles.optionListItemLeftLabel}>版本更新</Text>
                    </View>
                    <View style={{display: 'flex',flexDirection: 'row'}}>
                        <Text style={{color: '#8B8B8B'}}>v1.0.0</Text>
                        <AntDesign name={'right'} size={18} style={styles.arrowIcon} />
                    </View>
                </TouchableOpacity>
                <TouchableOpacity style={styles.optionListItem}>
                    <View style={styles.optionListItemLeft}>
                        <Image source={require('../../assets/mine/menu_icon6.png')} style={styles.optionListItemLeftIcon}/>
                        <Text style={styles.optionListItemLeftLabel}>设置</Text>
                    </View>
                    <AntDesign name={'right'} size={18} style={styles.arrowIcon} />
                </TouchableOpacity>
                <TouchableOpacity style={styles.optionListItem}>
                    <View style={styles.optionListItemLeft}>
                        <Image source={require('../../assets/mine/menu_icon7.png')} style={styles.optionListItemLeftIcon}/>
                        <Text style={styles.optionListItemLeftLabel}>建议反馈</Text>
                    </View>
                    <AntDesign name={'right'} size={18} style={styles.arrowIcon} />
                </TouchableOpacity>
                <TouchableOpacity
                    style={styles.optionListItem}
                    onPress={()=>this._exitApp()}
                >
                    <View style={styles.optionListItemLeft}>
                        <Image source={require('../../assets/mine/menu_icon7.png')} style={styles.optionListItemLeftIcon}/>
                        <Text style={styles.optionListItemLeftLabel}>退出登录</Text>
                    </View>
                    <AntDesign name={'right'} size={18} style={styles.arrowIcon} />
                </TouchableOpacity>
            </View>
        )
    }
    render() {
        return (
            <SafeAreaViewPlus>
                <View style={styles.headerPanel}>
                    <StatusBar backgroundColor="#ff0000"
                               translucent={true}
                               hidden={true}
                               animated={true}/>
                    <ImageBackground style={styles.topBgImage} source={require('../../assets/mine/header_bg.png')} >
                        {this._renderUserInfo()}
                    </ImageBackground>
                </View>
                {this._renderBtns()}
                <ScrollView showsVerticalScrollIndicator={false}>
                    {this._renderMenu1()}
                    {this._renderMenu2()}
                </ScrollView>
            </SafeAreaViewPlus>
        );
    }
}
export default Mine;
